import { useCallback, useMemo } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import Button from "../Button";

const menus = [
    {
        name: "Home",
        title: "首页",
        path: "/",
    },
    {
        name: "Huoketong",
        title: "获客通",
        path: "#huoketong",
    },
    {
        name: "Jubaopen",
        title: "聚宝盆",
        path: "#jubaopen",
    },
    {
        name: "LiveAI",
        title: "直播智控",
        path: "#liveai",
    },
    {
        name: "LiveBox",
        title: "直播盒子",
        path: "#livebox",
    },
    {
        name: "PrivateMarket",
        title: "私域智营",
        path: "#privatemarket",
    },
    {
        name: "Price",
        title: "产品价格",
        path: "/price",
    },
    {
        name: "About",
        title: "关于我们",
        path: "/about",
    },
];

type MenuWithState = {
    name: string;
    title: string;
    path: string;
    active: boolean;
};

const Menu = () => {
    const route = useLocation();
    const navigate = useNavigate();
    const menusWithState = useMemo<MenuWithState[]>(() => {
        return menus.map((item) => {
            if (item.path === route.pathname) {
                return { ...item, active: true };
            }
            return { ...item, active: false };
        });
    }, [route]);

    const goTo = useCallback(
        (item: MenuWithState) => {
            if (item.path) {
                navigate(item.path);
            }
        },
        [navigate]
    );
    return (
        <div className="group grow">
            <div className="flex items-center gap-4 laptop:hidden">
                <Button size="small">
                    <img src="/header/icon-menu.svg" />
                </Button>
                <img className="h-6" src="/logo.svg" alt="易剪云" />
            </div>
            <ul className="flex-col justify-center hidden shrink-0 w-full group-has-[:focus]:flex text-font-blue laptop:bg-transparent laptop:flex-row laptop:flex desktop:gap-4 *:shrink-0 *:px-2 *:py-4 *:text-sm *:cursor-pointer">
                {menusWithState.map((item) => (
                    <li
                        key={item.name}
                        onClick={() => goTo(item)}
                        className={
                            item.active
                                ? "border-blue border-b-4 text-blue font-medium"
                                : "border-font-blue-100 border-opacity-10 laptop:border-none [&:not(:last-child)]:border-b"
                        }
                    >
                        {item.title}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default Menu;
